<script setup lang="ts">
import { getHomeBannerAPI, getHomePanelAPI, getHomtAPI } from '@/services/Home'
import Shopp from '@/components/Shopp.vue'
import ShoppGues from '@/components/ShoppGues.vue'
import Navbar from './component/Navbar.vue'
import Panel from './component/Panel.vue'
import HomtPanel from './component/HomtPanel.vue'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem, HomtItem, PanelItem } from '@/types/Home'

//获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
  // console.log(res)
}
//获取前台数据接口
const panelList = ref<PanelItem[]>([])
const getHomePanelData = async () => {
  const res = await getHomePanelAPI()
  panelList.value = res.result
}

//获取前台热门数据接口
const homtList = ref<HomtItem[]>([])
const getHomtData = async () => {
  const res = await getHomtAPI()
  homtList.value = res.result
}

onLoad(() => {
  getHomeBannerData()
  getHomePanelData()
  getHomtData()
})
</script>

<template>
  <!-- 自定义导航栏 -->
  <Navbar />
  <scroll-view class="srcoll" scroll-y>
    <!-- 自定义轮播图 -->
    <Shopp :list="bannerList" />
    <!-- 前台类目数据类型 -->
    <Panel :list="panelList" />
    <!-- 首页-热门推荐数据类型 -->
    <HomtPanel :list="homtList" />
    <!-- 首页-猜你喜欢组件封装 -->
    <ShoppGues />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  //flex-direction可以改变flex的布局方向
  flex-direction: column;
}
.srcoll {
  flex: 1;
}
</style>
